<template>
  <div style="padding: 12px 0">
    <BasicTable
      @register="registerTable"
      @expand="onExpand"
      :resizeHeightOffset="24"
      v-model="state.expandedRowKeys"
      style="padding: 0"
    >
      <template #action>
        <TableAction
          :divider="true"
          :actions="[
            {
              color: 'success',
              label: '查看详情',
            },
          ]"
        />
      </template>
      <template #expandedRowRender="{ record }">
        <BasicTable
          size="small"
          @register="registerDetail"
          :scroll="{ y: 520 }"
          :dataSource="record.memberDepositDetailList"
          style="padding: 0"
        />
      </template>
    </BasicTable>
  </div>
</template>

<script setup>
import {defineOptions, h, ref, reactive} from 'vue';
  import { BasicTable, TableAction, useTable } from '@/components/Table';
import dayjs from 'dayjs'
  import { PAGE, POST } from '@/api/http';
  import ProImgCell from '@/widget/pro-img-cell.vue';
  import { getLabel, moveTypeCodeList2 } from '@/api/ds.js';
  import { Image as AImage } from 'ant-design-vue';
  import _default from "ant-design-vue/es/vc-slick/inner-slider";
import {clearCart} from "../cashier/cart";
  defineOptions({ name: 'MemberDepositLog' });

  const props = defineProps({
    memberCode: {
      type: String,
    },
  });
  const endTime = ref()
  const startTime = ref()

const state = reactive({
  expandedRowKeys: []
})

const [registerTable, { setLoading, reload }] = useTable({
    api: PAGE('/product/memberDepositList'),
    beforeFetch: (arg) => {
      const { memberCode: owner } = props;
      startTime.value = arg.startTime
      endTime.value = arg.endTime
      return Object.assign(arg, { owner,endTime:endTime.value?endTime.value + ' 23:59:59':null,startTime:startTime.value?startTime.value + ' 00:00:00':null });
    },
    expandRowByClick: true,
    formConfig: {
      baseColProps: { style: { paddingRight: '12px' } },
      actionColOptions: { span: 5 },
      schemas: [
        {
          field: 'goodsName',
          component: 'Input',
          componentProps: {
            placeholder: '输入商品名称搜索',
          },
          colProps: { span: 6 },
        },
        {
          field: 'startTime',
          component: 'DatePicker',
          componentProps: {
            showTime: false,
            placeholder: '开始日期',
            valueFormat: 'YYYY-MM-DD',
            format: 'YYYY-MM-DD',
            disabledDate: (value) => endTime.value < dayjs(value).format("YYYY-MM-DD"),
            onChange(values) {
              // reload()
              startTime.value = values
              console.log(state.expandedRowKeys)
              console.log(values,startTime.value,endTime.value)
            },
          },
          colProps: {span: 6},
        },

        {
          field: 'endTime',
          component: 'DatePicker',
          componentProps: {
            showTime: false,
            placeholder: '结束日期',
            valueFormat: 'YYYY-MM-DD',
            format: 'YYYY-MM-DD',
            disabledDate: (value) => startTime.value > dayjs(value).format("YYYY-MM-DD"),
            onChange(values) {
              // reload()
              endTime.value = values
              console.log(state.expandedRowKeys)
              console.log(values,startTime.value,endTime.value)
            },
          },
          colProps: {span: 6},
        },
      ],
    },
    columns: [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: false,
        width: 360,
        customRender: ({ value: title, record }) =>
          h(ProImgCell, { src: record.goodsImage, title }),
      },
      {
        title: '寄存数量',
        dataIndex: 'stock',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
      },
    ],
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'goodsSn',
    actionColumn: {
      title: '操作',
      align: 'center',
      width: 120,
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });
  async function onExpand(expanded, record) {
    if (!expanded) {
      return;
    }
  }

  const [registerDetail, ] = useTable({
    pagination: false,
    columns: [
      {
        title: '变更类型',
        dataIndex: 'moveTypeCode',
        ellipsis: false,
        width: 120,
        customRender: ({ value }) => getLabel(moveTypeCodeList2, value),
      },

      {
        title: '变更前数量',
        dataIndex: 'origQty',
        ellipsis: false,
        width: 110,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
      },
      {
        title: '变更后数量',
        dataIndex: 'afterQty',
        ellipsis: false,
        width: 110,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
      },

      {
        title: '操作人',
        dataIndex: 'employeesName',
        width: 120,
        ellipsis: false,
      },

      {
        title: '操作时间',
        dataIndex: 'addTime',
        ellipsis: false,
        width: 180,
      },

      {
        title: '顾客签字',
        dataIndex: 'signName',
        ellipsis: false,
        width: 180,
        customRender: ({ value }) => h(AImage, { width: 160, src: value }),
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'moveCode',
  });
</script>
<style lang="less" scoped></style>
